<template>
	<div class="bg">
		<goback title="更改名字"></goback>
		<div class="save">
			<button :class="{ 'greenButton': isButtonGreen, 'grayButton': !isButtonGreen }" @click="editName">保存</button>
		</div>
		<div class="input" @input="handleInput">
			<input type="text" v-model="inputText">
		</div>
		<div class="text">
			<div v-if="sf=='企业'">好名字可以让你的买家更好的记住你</div>
			<div v-else>好名字可以让你的卖家更好的记住你</div>
		</div>

	</div>

</template>

<script>
	export default {
		data() {
			return {
				sf: "企业",
				inputText: '',
				isButtonGreen: false,
				inputTimeout: null,
			}
		},
		methods: {
			handleInput() {
				console.log(this.inputText)
				if (this.inputText.trim() == '') {
					this.isButtonGreen = false
				}else{
					this.isButtonGreen = true;
				}
			},
			editName(){
				
				if(this.isButtonGreen ==false){
					return;
				}
				
				this.axios.get(`${this.IP}/editname`, {
					params:{
						token: this.getStorage('token'),
						new_name: this.inputText
					}
				}).then(res => {
					let that = this;
						this.$toast.showMessage(res.data);
						that.$router.go(-1);
						setTimeout(function(){
							location.reload();
							
						},1500)
				})
			},

		},
	}
</script>

<style scoped>
	.save {
		display: flex;
		justify-content: flex-end;
		margin-right: 2vw;
		margin-top: 2vw;
	}

	.greenButton {
		background-color: #06d072;
		color: white;
		padding: 1vw;
		border-radius: 1vw;
	}

	.grayButton {
		background-color: #c6c6c6;
		color: white;
		padding: 1vw;
		border-radius: 1vw;
	}

	.input {
		display: flex;
		justify-content: center;
		margin-top: 10vw;

	}

	input {

		border-top: none;
		border-right: none;
		border-left: none;
		border-bottom: 1px solid #c6c6c6;
		caret-color: #c6c6c6;
		margin-top: 3vw;
		padding-left: 1vw;
		background-color: #f1f1f1;
		width: 90vw;
	}

	input:focus {
		outline: none;
		box-shadow: none;
		border-bottom: 1px solid #06b666;
		caret-color: #06b666;
	}

	.text {
		margin-left: 5vw;
		margin-top: 4vw;
		color: #c6c6c6;
	}
</style>
